<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<ul id="scott">
			<li>广东省</li>
			<li>湖南省</li>
		</ul>
		
		<br/>
		
		增加省份 <input  id="addProvince" value="陕西省"  />
		
		
		<input type="button" id="addBtn" value="增加省份" /><br/>
		
		
		删除省份 <input  id="deleteProvince" value="陕西省"  />
		
		
		<input type="button" id="deleteBtn" value="删除省份" /><br/>
		
		
		before <input  id="before" value="陕西省"  /> <br/>
		after <input  id="after" value="山西省"  /> <br/>
		
		
		<input type="button" id="updateBtn" value="修改省份" /><br/>
		
		
		query <input  id="query" value="陕西省"  /> <br/>
		
		
		<input type="button" id="queryBtn" value="查询省份" /><br/>
	</body>
	
	<script type="text/javascript" src="js/jquery-1.4.1.js" ></script>
	<script>
		
		$('#deleteBtn').click(function(){
			var del = $('#deleteProvince').val();
			var scott = $('#scott');
			var children = scott.children();
			children.each(function(index,data){
				var deleteElement = $(data);
				var xx  = deleteElement.text();
				if(del == xx){
					//说明省份重复
					deleteElement.remove();
				}
			});
		});

		$("#updateBtn").click(function () {
			var befroeName = $("#before").val();
			var afterName = $("#after").val();
            var children =  $('#scott').children();
            children.each(function(index,data){
                var val  = $(data).text();
                if(val == befroeName){
                    $(data).text(afterName);
                }
            });
        });

		$("#queryBtn").click(function () {
			var query = $("#query").val();
            var children =  $('#scott').children();
            var count=0;
            children.each(function(index,data){
                var val  = $(data).text();
                if(val == query){
                   alert(query+"存在");
                   count++;
                   return;
                }
            });
            if(count==0){
                alert(query+"不存在");
			}
        });

		$('#addBtn').click(function(){
			
			var li = $('#addProvince').val();
			var element = $('<li>'+li+'</li>');
			//1 判断省份是否存在
			var scott = $('#scott');
			var children = scott.children();
			//alert(children.length);
			var counter =0;
			children.each(function(index,data){
				var val  = $(data).text();
				if(val == li){
					//说明省份重复
					counter++;
				}
			});
			if(counter == 0 ){
				$('#scott').prepend(element);
			}else{
				alert(li + "省份重复...");
			}
		});
		
	</script>
</html>
